<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 交互   (前后端数据交互的一个过程)

    // 案例
    // ajax请求同服务下的文本文件 => 请求方式:get


    // ajax的请求流程
    // 1. 创建http请求(请求的载体)
    // 2. 配置请求相关的信息  => 请求的方式 请求的地址(接口地址/本地文件地址)  携带数据  是否异步
    // 3. 发送请求
    // 4. 等服务器响应成功之后,接收服务器响应的结果 (结果不一定是成功的)

    // xhr.readyState   =>  请求状态(标识请求到了哪一步)
    // 0 请求未初始化,只是创建了请求,还未配置请求相关的信息
    // 1 请求已经建立，但是还没有发送 (已经配置了请求相关的信息,但是请求还未发送)
    // 2 请求已发送，服务端已经接收了请求, 正在处理中（通常现在可以从响应中获取内容头）
    // 3 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
    // 4 请求已经处理完毕,响应已完成,接收服务器响应的结果(结果不一定是成功的)

    // xhr.status   =>  http状态码 => 响应的状态码 (标识响应的一系类结果 => 三位数)
    // 1**	信息，服务器收到请求，需要请求者继续执行操作
    // 2**	成功，操作被成功接收并处理
    // 3**	重定向，需要进一步的操作以完成请求
    // 4**	客户端错误，请求包含语法错误或无法完成请求
    // 5**	服务器错误，服务器在处理请求的过程中发生了错误

    // 常见状态码
    // 200：ok，页面正确打开，并得到完整的响应内容。
    // 301：被请求的资源已永久移动到新位置
    // 302：请求的资源临时从不同的 URI响应请求
    // 304：缓存
    // 404：页面不存在。
    // 500：常指后端代码发生错误
    // 503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

    var xhr = new XMLHttpRequest();
    console.log(xhr);
    console.log(xhr.readyState); // 0
    
    // xhr.open(type,url,async);
    // type 请求的方式   
    // url  请求的地址  (get方式传递数据:  url?user=a123123&pwd=123123)
    // async 是否异步   (true(默认):异步  false:同步)
    // xhr.open("get","../data/1.txt",true);
    xhr.open("get","../data/1.json",true);
    console.log(xhr.readyState); // 1
    
    xhr.send();  
    console.log(xhr.readyState); // 1

    // 监听xhr.readyState改变 => 当xhr.readyState改变时,会触发次事件,执行对应事件函数
    xhr.onreadystatechange = function(){
        // 此事件默认会触发三次  => 2  3   4
        console.log("xhr.readyState改变了:",xhr.readyState);

        // xhr.readyState == 4  => 响应结束,返回响应的结果
        // xhr.status == 200    => 响应的结果也是成功的
        if(xhr.readyState == 4 && xhr.status == 200){

            // 后端返回的各种类型数据 可以有 text html json 等
            // 如果已知后端返回的数据时json数据 => 需要通过JSON.parse()解析之后才能使用
            var res = xhr.responseText;
            console.log("success",res);

            res = JSON.parse(res);
            console.log(res);
        }   

    }

    



    



</script>
</html>